<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
    <title>bootstrap实例</title>
</head>
<body>
    <div class="container">
        <h1>网格布局</h1>

        <div class="row">
            <div class="col-sm-3" style="background: antiquewhite">列1</div>
            <div class="col-sm-3" style="background: blueviolet">列2</div>
            <div class="col-sm-3" style="background: red">列3</div>
            <div class="col-sm-3" style="background: firebrick">列4</div>
        </div>
        <div class="row">
            <div class="col-sm-4" style="background: lime">列1</div>
            <div class="col-sm-4" style="background: gold">列2</div>
            <div class="col-sm-4" style="background: fuchsia">列3</div>
        </div>
    </div>
<br>
    <div class="container">
        <h1>标题</h1>

        <h1 class="display-1">标题1<small>副标题</small></h1>
        <h2 class="display-2">标题2<small>副标题</small></h2>
        <h3 class="display-3">标题3<small>副标题</small></h3>
        <p>这个是段落<mark>高亮显示</mark></p>
    </div>
</body>
</html>